前言

try…catch 應該是最常見到的，三元運算子則是我自己很常用的方法。

為了避免後端給的東西有缺漏，在前端的我們，要用什麼方式美化成果呢？這篇文章說到了 try…catch、三元運算子(? : )、邏輯運算子( || ) 三種方法。

這篇是想說for前端防資料缺漏，如想看更詳細的運算子說明，歡迎到 關於運算子

try…catch

try ⇒ 放那些你要執行的程式碼(code)。

catch ⇒ 放如果有錯(err)，要執行的程式碼，通常會是將錯誤訊息回傳或是 console.log() 出來。

可以想成先 try 某段程式碼，如果有錯誤(err)，就把它捕捉起來，並換到 catch 內執行程式碼。

function testTryCatch(code, err) {
  try {
    return 'result'
  } catch (err) {
    console.log(err)
  }
}

避免從後端回傳的data是空陣列

三元運算子判斷

變數叫res，裡面的data寫成平時後端會回傳的格式。

假如data內是空的，可以用三元運算子預防直接什麼都不顯示(第二個範例)。

使用三元運算子來寫，程式會變得簡潔許多。

let res
res = {
    data:[
    	{id: 40, name: 'yoshinoko'},
    	{id: 12, name: 'sakana'},
    	{id: 57, name: 'yukiyuki'},
    ],
}
console.log(res.data.length > 0 ? res.data[0] : '暫無資料...')

>> {id: 40, name: 'yoshinoko'}

let res
res = {
    data:[],
}
console.log(res.data.length > 0 ? res.data[0] : '暫無資料...')

>> 暫無資料...

避免從後端回傳的data中含有空值

如果找不到就等於空值( || )

跟上面一樣的例子(就連res內容也一樣)

回傳的資料，用 || 讓它判斷，假如有value是空的，就顯示「暫無資料」。

let res = {
    data:[
    	{id: 40, name: 'yoshinoko'},
    	{id: 12, name: 'sakana'},
    	{id: 57, name: 'yukiyuki'},
    ],
}
let resName = res.data[0].name || ''
console.log(resName)

>> yoshinoko

let res = {
    data:[
    	{id: 40, name: ''},
    	{id: 12, name: 'sakana'},
    	{id: 57, name: 'yukiyuki'},
    ],
}
let resName = res.data[0].name || '暫無資料...'
console.log(resName)

>> 暫無資料...

補充

用 vue 寫時也可以利用 ? 來判斷此值是否為空、要不要往下找。

寫法：

• res?.data?.[0]?.id
• 或是包v-if，用陣列長度判斷 <div v-if="res?.data?.length">{{ res.data[0].id }}</div>

結語

身為一名前端，在工作以來確實會碰到資料有空值的狀況，在這裡整理幾個自己會用的方法。